<template>
	<view class="container">
		<nav-top :title="navTitle" :type="navType" />
		<image class="avatar" :src="informationList.avatar" mode=""></image>
		<view class="information">
			<text class="information-attr">昵称</text>
			<view class="change-attr">
				<text class="attr-ins">{{informationList.name}}</text>
				<image class="arrow" src="@/static/images/my/arrow@2x.png" mode=""></image>
			</view>
			<text class="information-attr">性别</text>
			<view class="change-attr">
				<text class="attr-ins">{{informationList.gender==="MALE"?"男":"女"}}</text>
				<image class="arrow" src="@/static/images/my/arrow@2x.png" mode=""></image>
			</view>
			<text class="information-attr">生日</text>
			<view class="change-attr">
				<text class="attr-ins">{{dateTransform(informationList.birthDay)}}</text>
				<image class="arrow" src="@/static/images/my/arrow@2x.png" mode=""></image>
			</view>
			<text class="information-attr">学校</text>
			<view class="change-attr">
				<text class="attr-ins">{{informationList.schoolId==1?"成都工业学院":"未知学校"}}</text>
				<image class="arrow" src="@/static/images/my/arrow@2x.png" mode=""></image>
			</view>
			<text class="information-attr">电话号码</text>
			<view class="change-attr">
				<text class="attr-ins">{{informationList.phone}}</text>
				<image class="arrow" src="@/static/images/my/arrow@2x.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useStore
	} from "vuex";
	import request from "@/Api/request.js"
	import {
		reactive
	} from "vue";
	import dateTransform from "@/utils/dateTransform.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const store = useStore();
	const navTitle = "我的资料";
	const navType = "commen";
	const informationList = reactive(store.state.user);

	onLoad(()=>{
		request({
			url: "/user/" + store.state.user.id,
			method: "GET"
		}).then((res) => {
			console.log(res);
			if (!informationList) {
				informationList = res
			}
		})
	})

</script>

<style lang="scss" scoped>
	.container {
		background: #fff;
		height: 100%;

		.avatar {
			width: 176rpx;
			height: 176rpx;
			margin: 72rpx auto 48rpx;
			display: flex;
			align-items: center;
		}

		.information {
			display: flex;
			flex-direction: column;
			gap: 8rpx;

			.information-attr {
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				margin-bottom: 8rpx;
			}

			.change-attr {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 64rpx;
				position: relative;

				.attr-ins {
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
				}

				.arrow {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.change-attr::after {
				content: "";
				position: absolute;
				width: 100%;
				height: 2rpx;
				background: #E6E6E6;
				bottom: -32rpx;
			}
		}
	}
</style>